<template>
  <div class="big">
<!-- <h1>我的关注页</h1> -->
  <div class="box">
    <van-nav-bar  left-text="返回" left-arrow @click-left="$router.back()" />
  </div>
  <div class="content">
    <h1>美食节 🎡 活动</h1>
    <div class="title">
      <span><van-icon name="clock-o" /> 时间</span>
      <span>13:00-17:30 开放</span>
    </div>
    <div class="title">
      <span><van-icon name="location-o" /> 位置</span>
      <span @click="$router.push('/map')">美食区 11F > </span>
    </div>
    <div class="aside">
      <h3>活动介绍</h3>
      <p>
        欢迎您来到主题乐园，参加美食街活动。
        主题乐园拥有1832m²大型室内游玩场所。
      </p>
      <br>
      <p>
        主题公园或游乐园是一个有游乐设施的景点， 他们通常包含不同类型的游乐设施——如过山车和水上游乐设施——以及商店，餐馆和其他娱乐场所。 主题公园可供成人，青少年和儿童游玩。主题公园或游乐园是一个有游乐设施的景点，
        他们通常包含不同类型的游乐设施——如过山车和水上游乐设施——以及商店，餐馆和其他娱乐场所。 主题公园可供成人，青少年和儿童游玩。
        主题公园或游乐园是一个有游乐设施的景点， 他们通常包含不同类型的游乐设施——如过山车和水上游乐设施——以及商店，餐馆和其他娱乐场所。 主题公园可供成人，青少年和儿童游玩。
      </p>
      <br>
      <p>
        主题公园或游乐园是一个有游乐设施的景点， 他们通常包含不同类型的游乐设施——如过山车和水上游乐设施——以及商店，餐馆和其他娱乐场所。 主题公园可供成人，青少年和儿童游玩。
      </p>
      <br>
      <p>
        主题公园或游乐园是一个有游乐设施的景点， 他们通常包含不同类型的游乐设施——如过山车和水上游乐设施——以及商店，餐馆和其他娱乐场所。 主题公园可供成人，青少年和儿童游玩。主题公园或游乐园是一个有游乐设施的景点，
        他们通常包含不同类型的游乐设施——如过山车和水上游乐设施——以及商店，餐馆和其他娱乐场所。 主题公园可供成人，青少年和儿童游玩。
        主题公园或游乐园是一个有游乐设施的景点， 他们通常包含不同类型的游乐设施——如过山车和水上游乐设施——以及商店，餐馆和其他娱乐场所。 主题公园可供成人，青少年和儿童游玩。
      </p>
    </div>
  </div>
  <div class="btnBox">
    <van-button round type="warning" size="large" @click="care" > ❤️ 关注活动</van-button>
  </div>
  </div>
</template>

<script setup>
import { showSuccessToast, showFailToast } from 'vant';


let care=()=>{
  showSuccessToast('关注成功');
  console.log(111);
}
</script>

<style lang="scss" scoped>
.big{
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: auto;
  .box {
  width: 375px;
  height: 281px;
  background: url('https://img0.baidu.com/it/u=2978406111,1285143019&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800') 100%/cover;

  .van-nav-bar {
    background: transparent;
    color: white;
  }
}
.content{
  flex: 1;
  overflow: auto;
  padding: 0 10px;

//   border-top-right-radius:25px;
//   border-top-left-radius: 25px;
// border: 1px solid black;
    h1{
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
    .title{
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    h3{
      height: 40px;
      line-height: 40px;
    }
    p{
      text-indent: 24px;
    }
}
.btnBox{
  height: 50px;
  width: 375px;
  padding: 5px 10px;
  .van-button{
    width: 90%;
  }
}
}

</style>